<template>
  <!-- 地址簿填写 -->
  <layout :title="title" background="#fff">
    <tohome />
    <view>
      <view class="address-list">
        <view v-if="!orderId" class="list-call" @tap="openSelect">
          <image
            :src="getImgSrc('/home/icon_map@2x.png')"
            style="width: 40rpx; height: 40rpx"
            mode="heightFix"
          ></image>
          <view class="list-call address-list-call-right">
            <input
              class="u-input"
              type="text"
              disabled
              v-model="schoolName"
              maxlength="32"
              placeholder="请选择校区"
            />
            <image
              :src="getImgSrc('/home/icon_right.png')"
              style="height: 30rpx; width: 30rpx"
              mode="heightFix"
            ></image>
          </view>
        </view>
        <view class="list-call" v-if="!orderId" @tap="gotoMap">
          <image
            :src="getImgSrc('/address/icon_location@2x.png')"
            style="width: 40rpx; height: 40rpx"
            mode="heightFix"
          ></image>
          <view class="list-call address-list-call-right">
            <input
              class="u-input"
              type="text"
              disabled
              v-model="addressString"
              maxlength="32"
              placeholder="请选择定位"
            />
            <image
              :src="getImgSrc('/home/icon_right.png')"
              style="height: 30rpx; width: 30rpx"
              mode="heightFix"
            ></image>
          </view>
        </view>
        <view class="list-call">
          <image
            :src="getImgSrc('/address/icon_address@2x.png')"
            style="width: 40rpx; height: 40rpx"
            mode="widthFix"
          ></image>
          <view class="list-call address-list-call-right">
            <u-input
              :placeholderStyle="'color:#808080;font-size:30rpx'"
              class="u-input"
              type="text"
              v-model="address"
              maxlength="32"
              placeholder="请输入详细地址"
            />
          </view>
        </view>
        <view class="list-call">
          <image
            :src="getImgSrc('/address/icon_name@2x.png')"
            style="width: 40rpx; height: 40rpx"
            mode="widthFix"
          ></image>
          <view class="list-call address-list-call-right">
            <view class="list-call address-list-call-1">
              <u-input
                :placeholderStyle="'color:#808080;font-size:30rpx'"
                class="u-input"
                type="text"
                v-model="name"
                maxlength="32"
                placeholder="姓名"
              />
            </view>
            <view class="list-call address-list-call-2">
              <image
                :src="getImgSrc('/address/icon_phone@2x.png')"
                style="width: 40rpx; height: 40rpx"
                mode="widthFix"
              ></image>
              <input
                :placeholderStyle="'color:#808080;font-size:30rpx'"
                style="margin-left: 25rpx"
                class="u-input"
                type="number"
                v-model="mobile"
                maxlength="32"
                placeholder="联系电话"
              />
            </view>
            <!-- <view class="list-call address-list-call-3"> 通讯录 </view> -->
          </view>
        </view>
        <view class="list-call" v-if="sendOrGet == 'get'">
          <view
            class="iconfont icon-key"
            style="font-size: 22px; color: #7b7b7b"
          ></view>
          <view class="list-call address-list-call-right">
            <input
              :placeholderStyle="'color:#808080;font-size:30rpx'"
              class="u-input"
              v-model="qjm"
              maxlength="32"
              placeholder="取件码/确认码(选填)"
            />
          </view>
        </view>
      </view>
      <view class="goBtn" v-if="!orderId">
        <view class="list-call" @tap="gotoAddressList">
          <text>从地址簿选择</text>
          <image
            :src="getImgSrc('/home/icon_right.png')"
            style="height: 30rpx; width: 30rpx"
            mode="heightFix"
          ></image>
        </view>
      </view>
      <view class="bottom-btn">
        <view class="default-button" @tap="subHandle">确定</view>
      </view>
      <view
        class="screen-bottomFill"
        style="opacity: 1"
        :style="'height:' + vuex_phoneLayout.ipxbottom + 'px;'"
      >
        <!-- 用来填充导航 和 底部的多余 -->
      </view>
      <u-popup
        v-model="selectListShow"
        mode="bottom"
        @close="selectListShow = false"
      >
        <!-- <view style="width: 100vw; height: 40vh;background: #FFFFFF;">
					<scroll-view scroll-y style="height:40vh;">
						<view v-if="selectList.length">
							<view class="select_item" v-for="(item, index) in selectList" :key="index" @tap="selectHandle(item)">
								<view class="select_item_text1">
									<text>{{item.value}}</text>
								</view>
							</view>
						</view>
					</scroll-view>
				</view> -->
        <view
          style="width: 100vw; background: #ffffff; padding-top: 10rpx"
          :style="'padding-bottom:' + vuex_phoneLayout.ipxbottom + 'px;'"
        >
          <view class="search" style="background: #ffffff">
            <u-search
              v-model="keywords"
              @custom="search"
              @search="search"
            ></u-search>
          </view>
          <scroll-view scroll-y style="height: 40vh">
            <view v-if="selectList.length">
              <view
                class="select_item"
                v-for="(item, index) in selectList"
                :key="index"
                @tap="selectHandle(item)"
              >
                <view class="select_item_text1">
                  <text>{{ item.value }}</text>
                </view>
              </view>
            </view>
          </scroll-view>
        </view>
      </u-popup>
    </view>
  </layout>
</template>
<script>
import { checkTel, getPlatform } from "@/common/util.js";
export default {
  data() {
    return {
      navigationBarStyle: {
        background: "",
        color: "black",
        iconText: "完善验收信息", //导航栏文字
      },
      addressString: "",
      address: "",
      name: "",
      mobile: "",
      title: "",
      centerData: null,
      myAddress: {
        address: "",
        area: "",
        city: "",
        lat: "",
        lon: "",
        mobile: "",
        name: "",
        province: "",
        schoolId: "",
      },
      selectListShow: false,
      selectList: [],
      keywords: "",
      selectListData: "",
      schoolName: "",
      qjm: "",
      orderId: "",
      sendOrGet: "",
      platform: getPlatform(),
    };
  },
  onLoad(option) {
    if (option.orderId) {
      this.orderId = option.orderId;
      this.navigationBarStyle.title = "修改地址";
      this.requestOrderInfo();
      return;
    }
    this.phoneNo = option.phoneNo;
    this.sendOrGet = this.vuex_sendOrGet;
    this.title ="完善验收信息"
      // this.vuex_sendOrGet === "get" ? "完善验收信息" : "完善发件信息";
  },
  onShow() {
    if (this.orderId) return;
    this.getData();
    var pages = getCurrentPages();
    var prevPage = pages[pages.length - 1];
    if (
      !prevPage.centerData &&
      !prevPage.myAddress &&
      this.vuex_myAddress &&
      this.vuex_myAddress.id
    ) {
      this.myAddress = this.vuex_myAddress;
      this.initData(this.myAddress);
    }

    if (this.centerData) {
      this.myAddress.province = this.centerData.province;
      this.myAddress.city = this.centerData.city;
      this.myAddress.area = this.centerData.district + this.centerData.title;
      this.myAddress.lon = this.centerData.longitude;
      this.myAddress.lat = this.centerData.latitude;
      this.addressString =
        (this.centerData.province || "") +
        (this.centerData.city || "") +
        (this.centerData.district || "") +
        (this.centerData.title || "");
      this.centerData = null;
    }

    if (this.myAddress) {
      this.initData(this.myAddress);
    }
  },
  watch: {},
  methods: {
    requestOrderInfo() {
      this.$u.api
        .getModifyOrderAddress({
          tradeNo: this.orderId,
        })
        .then((res) => {
          this.address = res.data.address;
          this.name = res.data.name;
          this.mobile = res.data.mobile;
        });
    },
    updateOrderAddress() {
      this.$u.api
        .invokeModifyOrderAddress({
          tradeNo: this.orderId,
          address: this.address,
          name: this.name,
          mobile: this.mobile,
        })
        .then((res) => {
          if (res.code === 200) {
            uni.showToast({
              title: "操作成功",
              icon: "none",
              duration: 1500,
            });
            setTimeout(() => {
              uni.navigateBack({
                delta: 1,
              });
            }, 1500);
          }
        });
    },
    search(e) {
      let data = [];
      let list = [];
      if (this.selectListData && this.selectListData != "") {
        data = JSON.parse(this.selectListData);
        if (e) {
          data.map((item) => {
            if (item.value.indexOf(e) != -1) {
              list.push(item);
            }
          });
        } else {
          list = data;
        }
        this.selectList = list;
      }
    },
    initData(e) {
      var pages = getCurrentPages();
      var prevPage = pages[pages.length - 2];
      const defaultSchool = prevPage ? (prevPage.siteAddress) : {};
      if (defaultSchool) this.selectHandle({
        key: defaultSchool.schoolId,
        value: defaultSchool.schoolName
      });

      this.schoolName = e.schoolName || defaultSchool.value;
      this.addressString = (e.province || "") + (e.city || "") + (e.area || "");
      this.address = e.address;
      this.name = e.name;
      this.mobile = e.mobile;
    },
    selectHandle(e) {
      this.selectData = e;
      this.schoolName = e.value;
      this.myAddress.schoolId = e.key;
      this.myAddress.schoolName = e.value;
      this.selectListShow = false;
    },
    openSelect() {
      this.selectListShow = true;
    },
    gotoMap() {
      uni.navigateTo({
        url: `/subPages/map/map-wx?lat=${
          this.myAddress ? this.myAddress.lat : ""
        }&lon=${this.myAddress ? this.myAddress.lon : ""}`,
      });
    },
    gotoAddressList() {
      uni.navigateTo({
        url: "/pages/sys/cuser/addressList",
      });
    },
    gotoProMes() {
      uni.navigateTo({
        url: "/pages/sys/cuser/proMes",
      });
    },
    subHandle() {
      if (this.orderId) {
        this.updateOrderAddress();
        return;
      }

      const pages = getCurrentPages();
      const prePage = pages[pages.length - 2];
      if (
        prePage.schoolAdress.key &&
        String(prePage.schoolAdress.key) != String(this.myAddress.schoolId)
      ) {
        this.$u.toast(
          `${this.sendOrGet === "send" ? "送" : "取"}件校区必须为同一校区`
        );
        return;
      }
      this.myAddress.mobile = this.mobile;
      this.myAddress.name = this.name;
      this.myAddress.address = this.address;
      let pa = this.myAddress;

      /* 
					"address": "",
					"area": "",
					"city": "",
					"lat": 0,
					"lon": 0,
					"mobile": "",
					"name": "",
					"province": "",
					"schoolId": '' */
      if (pa.schoolId == "") {
        this.$u.toast("请选择校区");
        return;
      }
      if (pa.lat == 0 || pa.lon == 0) {
        this.$u.toast("请选择地址");
        return;
      }
      if (pa.address == "") {
        this.$u.toast("请输入详细地址");
        return;
      }
      if (pa.name == "") {
        this.$u.toast("请输入姓名");
        return;
      }
      if (pa.mobile == "") {
        this.$u.toast("请输入手机号");
        return;
      }
      if (!checkTel(pa.mobile)) {
        this.$u.toast("请输入正确的手机号");
        return;
      }
      this.$u.vuex("vuex_code", this.qjm);
      if (pa.id) {
        this.$u.api.putAddress(pa).then((res) => {
          if (res.code == "200") {
            this.$u.vuex("vuex_myAddress", this.myAddress);
            this.gotoProMes();
          } else {
            this.$u.toast(res.message);
          }
        });
      } else {
        this.$u.api.addAddress(pa).then((res) => {
          if (res.code == "200") {
            this.myAddress.id = res.data;
            this.$u.vuex("vuex_myAddress", this.myAddress);
            this.gotoProMes();
          } else {
            this.$u.toast(res.message);
          }
        });
      }
    },
    getData(e) {
      this.$u.api.getSchoolList().then((res) => {
        if (res.code == "200") {
          uni.hideLoading();
          this.selectList = res.data.school;
          this.selectListData = JSON.stringify(res.data.school);
        } else {
          this.$u.toast(res.message);
        }
      });
    },
  },
};
</script>
<style lang="scss">
@import "index.scss";
.address-list {
  padding: 0 30rpx;
}
.list-call {
  flex: 1;
}
.address-list-call-right {
  margin-left: 26rpx;
  border-bottom: #eaeaea 1rpx solid;
  .u-input {
    margin-left: 0;
  }
}
.address-list-call-1 {
  flex: 0 0 35%;
}
.address-list-call-2 {
}
.address-list-call-3 {
  flex: 0 0 90rpx;
  color: #4e95fc;
}
.goBtn {
  padding: 0 30rpx;
  margin-top: 50rpx;
  .list-call {
    height: 100rpx;
    border-radius: 50rpx;
    padding: 0 30rpx 0 57rpx;
    background: #f5f7f9;
  }
}
.bottom-btn {
  width: 100%;
  margin-top: 260rpx;
  // position: absolute;
  // width: 100%;
  // bottom: 130rpx;
  // left: 0;
}
</style>
